<template>
  <div class="home">
    <router-view v-slot="{ Component, route }">
      <transition name="router-fade" mode="out-in">
        <keep-alive :include="cachedView">
          <component :is="Component" :key="route.path" />
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

<script setup>
import useUserStore from "@/store/modules/user";
import { setLocalCache } from "@/utils/cache";
import defaultConfig from "@/settings";
import useReceiveMainData from "@/hooks/microApp/useReceiveMainData";
import { isMicroApp } from "@/microApp";
import useTagViewCatchPage from "@/hooks/useTagViewCatchPage";

const cachedView = useTagViewCatchPage();

if (isMicroApp()) {
  const userStore = useUserStore();
  const { userInfo, permissions, token, roles } = useReceiveMainData();
  userStore.permissions = permissions?.value || [];
  userStore.userInfo = userInfo?.value || {};
  userStore.roles = roles?.value || [];
  setLocalCache(defaultConfig.tokenAttr, token?.value || "");
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/transition.css";
.home {
  height: 100%;
}
</style>
